<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/system" replace>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>分期利率</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">分期利率</div>
      <div class="table">
        <el-row>
          <el-col :span="4">利率</el-col>
          <el-col :span="18">利率值</el-col>
          <el-col :span="2">操作</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">分期利率</el-col>
          <el-col :span="18"><span class="active">年率:</span>(0.2400)<span class="active">月率:</span>(0.0200)<span
            class="active">日率:</span>(0.00066)
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini" @click="edit(1)">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">账户余额收益</el-col>
          <el-col :span="18"><span class="active">年率:</span>( 0.04015)<span class="active">月率:</span>()<span
            class="active">日率:</span>(0.00011)
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">逾期还款利率</el-col>
          <el-col :span="18"><span class="active">年率:</span>( 0.36000)<span class="active">月率:</span>()<span
            class="active">日率:</span>(0.00100)
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">理财收益利率</el-col>
          <el-col :span="18"><span class="active">年率:</span>( 0.00010)<span class="active">月率:</span>()<span
            class="active">日率:</span>()
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">理财提现手续费</el-col>
          <el-col :span="18"><span class="active">提现率:</span>()</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">用户信用提现手续费</el-col>
          <el-col :span="18"><span class="active">提现率:</span>(0.01000)</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">商户账户提现手续费</el-col>
          <el-col :span="18"><span class="active">提现率:</span>(0.00300)</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">连连快捷手续费</el-col>
          <el-col :span="18"><span class="active">连连快捷手续费:</span>(0.00600)</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">银生宝</el-col>
          <el-col :span="18"><span class="active">银生宝手续费:</span>(0.00200)</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">连连认证手续费</el-col>
          <el-col :span="18"><span class="active">连连认证手续费:</span>(0.00300)</el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">修改</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="updateInterestRate" v-if="showInterestRates">
        <el-form :model="interestRates" size="mini" v-if="showInterestRate">
          <el-form-item label="年利率:">
            <el-input v-model="interestRates.year"></el-input>
            <span>标题不能超过30个字符</span>
          </el-form-item>
          <el-form-item label="月利率:">
            <el-input v-model="interestRates.month"></el-input>
            <span>多个关键字用,隔开</span>
          </el-form-item>
          <el-form-item label="日利率:">
            <el-input v-model="interestRates.day"></el-input>
            <span>多个关键字用,隔开</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="interestRates" size="mini" v-else>
          <el-form-item label="提现率:">
            <el-input v-model="interestRates.rate"></el-input>
            <span>标题不能超过30个字符</span>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        interestRates: {},
        showInterestRates: false,
        showInterestRate: true
      }
    },
    created () {
    },
    methods: {
      onSubmit () {
      },
      edit () {
      }
    },
    components: {}
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    .el-row {
      display: flex;
      text-align: center;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:last-child {
          border-right: none;
        }

        .active {
          color: red;
        }
      }

      &:first-child {
        font-weight: 700;
      }
    }
  }
  .updateInterestRate {
    padding: 20px 20px 0;

    .el-form {
      .el-form-item {
        .el-input {
          width: 20%;
        }
      }
    }
  }
</style>
